<template>
	<div class="list">
		<ul>
			<li v-for="item in listData" :key="item.id" @click="todetail(item.id)">
				<div class="fl">
					<p>{{item.title}}</p>
					<span>{{item.hint}}</span>
				</div>
				<div class="fr">
					<img :src="item.images">
				</div>
			</li>
		</ul>
		<div class="time">
			<p>9月21日</p>
			<hr/>
		</div>
		<ul>
			<li v-for="item in listData2" :key="item.id"  @click="todetail(item.id)">
				<div class="fl">
					<p>{{item.title}}</p>
					<span>{{item.hint}}</span>
				</div>
				<div class="fr">
					<img :src="item.images">
				</div>
			</li>
		</ul>
		<div class="time">
			<p>9月20日</p>
			<hr/>
		</div>
		<ul>
			<li v-for="item in listData3" :key="item.id"  @click="todetail(item.id)">
				<div class="fl">
					<p>{{item.title}}</p>
					<span>{{item.hint}}</span>
				</div>
				<div class="fr">
					<img :src="item.images">
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				listData:[],
				listData2:[],
				listData3:[],
			}
		},
		created:function(){
			this.$axios({
				url:"http://192.168.10.50/daily/index.php/Home/daily/before",
				methods:"get",
				params:{
					date:20200923
				}
			}).then((res)=>{
				console.log(res.data.stories)
				this.listData=res.data.stories
			})
			this.$axios({
				url:"http://192.168.10.50/daily/index.php/Home/daily/before",
				methods:"get",
				params:{
					date:20200922
				}
			}).then((res)=>{
				console.log(res.data.stories)
				this.listData2=res.data.stories
			})
			this.$axios({
				url:"http://192.168.10.50/daily/index.php/Home/daily/before",
				methods:"get",
				params:{
					date:20200921
				}
			}).then((res)=>{
				console.log(res.data.stories)
				this.listData3=res.data.stories
			})
		},
		methods:{
			todetail:function(id){
				this.$router.push({
					path:"/detail",
					query:{
						id,
					}
				})
			}
		}
	}
</script>

<style>
	.list{
		padding: 30px 10px;
	}
	.list li{
		width:100%;
		display: flex;
		padding: 10px 0px;
	}
	.list .fl{
		flex:0 80%;
	}
	.list .fl p{
		font-size: 14px;
		color: black;
	}
	.list .fl span{
		font-size: 12px;
		color: gray;
	}
	.list .fr{
		flex:auto;
	}
	.list .fr img{
		width:80px ;
		height: 80px;
	}
	.time{
		width: 100%;
		padding: 15px 0px;
		position: relative;
		color: gray;
	}
	.time hr{
		width: 80%;
		position: absolute;
		top:18px;
		right: 0px;
	}
	ul{
		padding-left: 0px;
	}
</style>
